<template>

  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    卡片视图区-->
    <el-card>
      <!--添加分类按钮-->
      <el-button type="primary" round @click="clickAdd">添加分类</el-button>
      <!--主要区域-->
      <!--         表格区-->
      <el-table
          :data="goodsData"
          row-key="cat_id"
          stripe
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="cat_name" label="分类名称"></el-table-column>
        <el-table-column prop="cat_delete" label="是否有效" v-slot="slot">
          <el-icon class="el-icon-success" style="color: lawngreen" v-if="!slot.row.cat_deleted"></el-icon>
          <el-icon class="el-icon-warning" style="color: red" v-if="slot.row.cat_deleted"></el-icon>
        </el-table-column>
        <el-table-column prop="cat_level" label="当前阶级" v-slot="slot">
          <el-tag v-if="slot.row.cat_level===0">一级</el-tag>
          <el-tag type="success" v-if="slot.row.cat_level===1">二级</el-tag>
          <el-tag type="warning" v-if="slot.row.cat_level===2">三级</el-tag>
        </el-table-column>
        <el-table-column label="操作" v-slot="slot">
          <el-button type="success" @click="editGoods(slot.row)">
            <el-icon class="el-icon-setting"></el-icon>
            编辑
          </el-button>
          <el-button type="danger" @click="deleteGoods(slot.row)">
            <el-icon class="el-icon-delete"></el-icon>
            删除
          </el-button>
        </el-table-column>
      </el-table>
      <!--         页码栏区-->
      <el-pagination
          @size-change="val=>{page.pagesize=val;getGoods()}"
          @current-change="val=>{page.pagenum=val;getGoods()}"
          :current-page="page.pagenum"
          :page-sizes="[4, 5, 6, 8]"
          :page-size="page.pagesize"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>

    <!--    弹出窗口区-->
    <div>
      <!--编译货物弹出窗-->
      <el-dialog
          title="提示"
          :visible.sync="isShowEdit"
          width="30%">
        <!--                表单区-->
        <el-input v-model="editGoodsName" placeholder="更改名称"></el-input>
        <!--                下方按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEdit = false">取 消</el-button>
          <el-button type="primary" @click="yesEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!--添加分类对话框-->
      <el-dialog
          title="添加分类"
          :visible.sync="isShowAdd"
          @close="addDialogClose"
          width="30%">
        <!--                表单区-->
        <el-form ref="addForm" label-width="80px" :model="addCate" :rules="addFormRules">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCate.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="分类父级">
            <!--options:数据源     props：配置-->
            <el-cascader
                v-model="optionCateParent"
                :options="parentsCate"
                :props="cascaderProps"
                style="width: 100%"
                clearable
                @change="parentCateChange"></el-cascader>
          </el-form-item>
        </el-form>
        <!--                下方按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowAdd = false">取 消</el-button>
          <el-button type="primary" @click="yesAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
export default {
  name: "GoodsList",
  data() {
    return {
      goodsData: [],
      page: {
        pagenum: 1,
        pagesize: 4,
      },
      total: 1,
      isShowEdit: false,
      isShowAdd: false,
      editGoodsName: '',
      newdata: {},
      addCate: {
        cat_pid: '',
        cat_name: '',
        cat_level: 0
      },
      //父级分类列表
      parentsCate: [],
      //选择的数据源【注意这里是数组，因为我们选择了xxx/xxxs所以两个都存起来的】
      optionCateParent: [],
      //级联选择器配置项
      cascaderProps: {
        //打开方式
        expandTrigger: 'hover',
        //可以选择第一级
        checkStrictly: 'true',
        //options配置
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
    //  表单预验证
      addFormRules:{
        cat_name:[
          {required:true, message:'请输入分类名称', trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    //获取所有货物列表
    getGoods() {
      this.$http.get('categories', {params: this.page}).then(res => {
        this.goodsData = res.data.data.result
        this.total = res.data.data.total
      })
    },
    // 编译货物
    editGoods(data) {
      this.newdata = data
      this.isShowEdit = !this.isShowEdit
    },
    //删除货物
    deleteGoods(data) {
      //第一个参数：主体类容，第二个参数：标题，第三个参数：配置
      this.$confirm('确定删除？', '提示', {
        //按钮的信息【文本】
        // confirmButtonText: '确定',
        // cancelButtonText: '取消',
        //消息类型图标
        type: 'warning'
      }).then(() => {
        this.$http.delete('categories/' + data.cat_id).then(res => {
          if (res.data.meta.status !== 200) return this.$message.error("删除失败")
          this.$message.success("删除成功")
          this.getGoods()
        })
      }).catch((val) => {
        console.log(val)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //确认更改
    yesEdit() {
      this.$http.put(`categories/${this.newdata.cat_id}`, {cat_name: this.editGoodsName}).then(res => {
        if (res.data.meta.status !== 200) return this.$message.error("更改失败")
        console.log(res)
        this.getGoods()
        this.$message.success("更改成功")
      })
    },
    //点击添加按钮
    clickAdd() {
      this.isShowAdd = !this.isShowAdd
      //获取前两级的父级分类
      this.$http.get('categories', {params: {type: 2}}).then(res => {
        this.parentsCate = res.data.data
      })
    },
    //确认添加
    yesAdd() {
      this.$http.post('categories', {
        cat_pid: this.optionCateParent[this.addCate.cat_level],
        cat_name:this.addCate.cat_name,
        cat_level:this.addCate.cat_level+1,
      }).then(res=>{
        if(res.data.meta.status!==201)return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.getGoods()
        this.isShowAdd=!this.isShowAdd
      })
    },
    //当级联选择器发生变化
    parentCateChange() {
      //注意这里，注意这里，是数组的长度要减一
      this.addCate.cat_level=this.optionCateParent.length-1
    },
    //当关闭了对话框
    addDialogClose(){
      //重置表单的数据【注意这里要给表单添加：model，以及要给表单的每一项添加props】
      this.$refs.addForm.resetFields()
      //重置级联选择器的数据
      this.optionCateParent=[]
      //重置addCate的等级
      this.addCate.cat_level=0
    }
  },
  created() {
    this.getGoods()
  }
}
</script>

<style scoped>

</style>